<template>
  <!-- 添加或修改商机管理对话框 -->
  <el-dialog
    :title="!form.id ? '添加商机' : '修改商机'"
    :visible.sync="visible"
    width="60%"
    append-to-body
    :close-on-click-modal="false"
  >
    {{form}}
    <el-form ref="form" class="cus-search-box cus-form-box" :model="form" :rules="rules">
      <el-form-item label="客户姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入客户姓名" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="职业" prop="occupation">
        <el-select v-model="form.occupation" placeholder="请选择职业" clearable>
          <el-option
            v-for="dict in occupationOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学历" prop="education">
        <el-select v-model="form.education" placeholder="请选择学历" clearable>
          <el-option
            v-for="dict in educationOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所在地区">
        <el-cascader
          v-model="area"
          size="large"
          :options="provinceAndCityDataOptions"
          @change="handleChange"
        />
      </el-form-item>
      <el-form-item label="微信号" prop="weixin">
        <el-input v-model="form.weixin" placeholder="请输入微信号" />
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input-number
          v-model="form.age"
          :precision="0"
          :min="1"
          :max="99"
          :step="1"
          placeholder="请输入年龄"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="专业" prop="major">
        <el-select v-model="form.major" placeholder="请选择专业" clearable>
          <el-option
            v-for="dict in majorOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="在职情况" prop="job">
        <el-select v-model="form.job" placeholder="请选择在职情况" clearable>
          <el-option
            v-for="dict in jobOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="当前薪资" prop="salary">
        <el-select v-model="form.salary" placeholder="请选择当前薪资" clearable>
          <el-option
            v-for="dict in salaryOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="qq" prop="qq">
        <el-input v-model="form.qq" placeholder="请输入qq" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="form.sex">
          <el-radio
            v-for="dict in sexOptions"
            :key="dict.dictValue"
            :label="dict.dictValue"
          >{{ dict.dictLabel }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="目标薪资" prop="expectedSalary">
        <el-select v-model="form.expectedSalary" placeholder="请选择目标薪资" clearable>
          <el-option
            v-for="dict in salaryOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="wp-50" label="备注" prop="remark">
        <el-input v-model="form.remark" type="text" :rows="1" show-word-limit placeholder="请输入备注" maxlength="20" />
      </el-form-item>
      <el-form-item label="意向学科" prop="subject">
        <el-select v-model="form.subject" placeholder="请选择意向学科" clearable @change="subjectChangeHandle">
          <el-option
            v-for="dict in subjectOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="意向课程" prop="courseId">
        <el-select v-model="form.courseId" placeholder="请选择意向课程" clearable @change="courseHandle">
          <el-option
            v-for="dict in courseOptions"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学习原因" prop="reasons">
        <el-input v-model="form.reasons" placeholder="请输入学习原因" maxlength="20" />
      </el-form-item>
      <el-form-item label="职业计划" prop="plan">
        <el-input v-model="form.plan" placeholder="请输入职业计划" maxlength="20" />
      </el-form-item>
      <el-form-item label="时间计划" prop="planTime">
        <el-date-picker
          v-model="form.planTime"
          clearable
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择时间计划"
        />
      </el-form-item>
      <el-form-item label="意向金额">
        <el-input v-model="form.interestAmount" disabled placeholder="请输入意向金额" />
      </el-form-item>
      <el-form-item class="wp-50" label="其他意向" prop="otherIntention">
        <el-input
          v-model="form.otherIntention"
          type="text"
          :rows="1"
          show-word-limit
          placeholder="请输入其他意向"
          maxlength="20"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button class="cus-reset-btn" @click="visible = false">取 消</el-button>
      <el-button class="cus-search-btn" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { isValidateCnName, isValidatePhone, isValidateQq, isValidateWx } from '@/utils/validate'
import { getBusiness, addBusiness, updateBusiness } from '@/api/business/business'
import { provinceAndCityData, CodeToText, TextToCode } from 'element-china-area-data'
import { listCourseSelect } from '@/api/clues/course'
export default {
  components: {},
  filters: {},
  data () {
    return {
      visible: false,
      insert: true,
      area: [],
      // 表单参数
      form: {
        id: undefined,
        name: undefined,
        phone: undefined,
        occupation: undefined,
        education: undefined,
        provinces: undefined,
        city: undefined,
        weixin: undefined,
        age: undefined,
        major: undefined,
        job: undefined,
        salary: undefined,
        qq: undefined,
        sex: "0",
        expectedSalary: undefined,
        remark: undefined,
        subject: undefined,
        reasons: undefined,
        plan: undefined,
        planTime: undefined,
        courseId: undefined,
        otherIntention: undefined
      },
      // 性能字典
      sexOptions: [],
      // 渠道来源字典
      channelOptions: [],
      subjectOptions: [],
      majorOptions: [],
      provinceAndCityDataOptions: provinceAndCityData,
      courseOptions: [],
      statusOptions: [],
      keyItemsOptions: [],
      occupationOptions: [],
      educationOptions: [],
      jobOptions: [],
      salaryOptions: [],
      trackStatusOptions: []
    }
  },
  computed: {
    rules () {
      return {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
          { validator: isValidateCnName, message: '请输入真实的姓名' }
        ],
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { validator: isValidatePhone, message: '请输入正确的手机号' }
        ],
        subject: [{ required: true, message: '意向学科不能为空', trigger: 'change' }],
        // activityId: [
        //   { required: true, message: '活动信息不能为空', trigger: 'blur' }
        // ],
        weixin: [{ validator: isValidateWx, message: '请输入正确的微信号' }],
        qq: [{ validator: isValidateQq, message: '请输入正确的QQ号' }]
      }
    }
  },
  watch: {},
  created () {
  },
  mounted () {
  },
  methods: {
    init () {
      this.insert = true
      this.visible = true
      this.$nextTick(() => {
        this.form.sex = 0
        this.$refs.form.resetFields()
        if (this.form.id) {
          this.insert = false
          this.getInfo()
        }
        this.getDicList()
      })
    },
    // 获取信息
    getInfo () {
      getBusiness(this.form.id).then(res => {
        if (res.code !== 200) {
          return this.$message.error(res.msg)
        }
        this.form = {
          ...this.form,
          ...res.data
        }
        if (this.form.provinces && this.form.city) {
          this.area = [TextToCode[this.form.provinces].code, TextToCode[this.form.provinces][this.form.city].code]
        }
      }).catch(() => {
      })
    },
    getDicList () {
      this.getDicts('sys_user_sex').then(response => {
        this.sexOptions = response.data
      })
      this.getDicts('course_subject').then(response => {
        this.subjectOptions = response.data
      })
      this.getDicts('clue_status').then(response => {
        this.statusOptions = response.data
      })
      this.getDicts('clues_item').then(response => {
        this.channelOptions = response.data
      })
      this.getDicts('communication_point').then(response => {
        this.keyItemsOptions = response.data
      })
      this.getDicts('occupation').then(response => {
        this.occupationOptions = response.data
      })
      this.getDicts('education').then(response => {
        this.educationOptions = response.data
      })
      this.getDicts('major').then(response => {
        this.majorOptions = response.data
      })
      this.getDicts('job').then(response => {
        this.jobOptions = response.data
      })
      this.getDicts('salary').then(response => {
        this.salaryOptions = response.data
      })
      this.getDicts('track_status').then(response => {
        this.trackStatusOptions = response.data
      })
    },
    handleChange (value) {
      if (value && value.length > 0) {
        this.form.provinces = CodeToText[value[0]]
        this.form.city = CodeToText[value[1]]
      } else {
        this.form.provinces = ''
        this.form.city = ''
      }
    },
    subjectChangeHandle () {
      this.$nextTick(() => {
        this.$refs.form.clearValidate('courseId')
      })
      this.form.courseId = null
      this.getCourseList()
    },
    // 所有课程列表
    async getCourseList () {
      this.courseOptions = []
      this.form.interestAmount = 0
      const res = await listCourseSelect({ subject: this.form.subject })
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.courseOptions = res.data
      if (this.form.courseId !== null && this.form.courseId !== '') {
        this.courseHandle(this.form.courseId)
      }
    },

    courseHandle (id) {
      const course = this.courseOptions.find(item => item.id === id)
      if (course) {
        this.form.interestAmount = course.price
      } else {
        this.form.courseId = null
        this.form.interestAmount = 0
      }
    },
    /** 提交按钮 */
    submitForm () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const res = await (this.form.id ? updateBusiness : addBusiness)(this.form)
          if (res.code !== 200) {
            return this.$message.error(res.msg)
          }
          this.msgSuccess('操作成功')
          this.visible = false
          this.$emit('refreshDataList')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
